<template>
  <Header />
  <div class="title">
    <img class="bannerImg" src="@/assets/image/register.png" alt="" />
    <div class="bannerDiv"></div>
    <span>{{ title }}</span>
  </div>
  <div class="cantainer">
    <div class="titleText">{{ title }}</div>
    <Examination v-if="type == '0'" />
    <SignUp v-if="type == '1'" />
    <Card v-if="type == '2'" />
    <Achievement v-if="type == '3'" />
  </div>
  <Footer />
</template>

<script>
import { defineComponent, onMounted, reactive, ref } from "vue";
import { message } from "ant-design-vue";
import { useRouter, useRoute } from "vue-router";
import Header from "@/components/Header.vue";
import Footer from "@/components/Footer.vue";
import Examination from "./components/Examination";
import SignUp from "./components/SignUp/SignUp";
import Card from "./components/Card/index.vue";
import Achievement from "./components/achievement/index.vue";
import { uploadImg, imgUrl, setUserRegister } from "@/api/https.js";
export default defineComponent({
  setup() {
    const formRef = ref();
    const router = useRouter();
    const route = useRoute();
    const formState = reactive({
      nickname: "", // 考生姓名
      nickname_py: "", // 考生拼音
      gender: null, // 性别
      birthday: null, // 出生日期
      username: "", // 身份证号
      avatar: "", // 照片（电子版）
      mobile: "", // 联系方式
      email: "", // 邮箱地址
      huji: "", // 户籍
      address: "", // 家庭住址
      school: "", // 目前就读学校/培训机构
      username_endtime: null, //证件有效期
      password: "", //密码
      passwordone: "", //确认密码
    });
    // 身份证正则
    let validatePass = async (rule, value) => {
      console.log("正则---", value);
      const zz = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
      if (!zz.test(value)) {
        return Promise.reject("身份证格式填写错误");
      } else {
        return Promise.resolve();
      }
    };
    // 电话正则
    let phoneZZ = async (rule, value) => {
      const zz = /^1[3456789]\d{9}$/;
      if (!zz.test(value)) {
        return Promise.reject("手机号格式错误");
      } else {
        return Promise.resolve();
      }
    };
    // 邮箱正则
    let emailZZ = async (rule, value) => {
      const zz =
        /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,5}$/;
      if (!zz.test(value)) {
        return Promise.reject("邮箱格式错误");
      } else {
        return Promise.resolve();
      }
    };
    // 二次密码验证
    let passwordZZ = async () => {
      if (formState.password !== formState.passwordone) {
        return Promise.reject("两次密码输入不一致");
      } else {
        return Promise.resolve();
      }
    };
    const rules = {
      nickname: [
        {
          required: true,
          message: "请输入姓名",
          trigger: "blur",
        },
      ],
      nickname_py: [
        {
          required: true,
          message: "请输入姓名",
          trigger: "blur",
        },
      ],
      gender: [
        {
          required: true,
          message: "请选择性别",
          trigger: "blur",
        },
      ],
      birthday: [
        {
          required: true,
          message: "请选择出生日期",
          trigger: "blur",
        },
      ],
      username: [
        {
          required: true,
          message: "请输入身份证号",
          trigger: "blur",
        },
        {
          validator: validatePass,
          trigger: "blur",
        },
      ],
      avatar: [
        {
          required: true,
          message: "请上传照片",
          trigger: "blur",
        },
      ],
      mobile: [
        {
          required: true,
          message: "请输入联系方式",
          trigger: "blur",
        },
        {
          validator: phoneZZ,
          trigger: "blur",
        },
      ],
      email: [
        {
          required: true,
          message: "请输入邮箱地址",
          trigger: "blur",
        },
        {
          validator: emailZZ,
          trigger: "blur",
        },
      ],
      huji: [
        {
          required: true,
          message: "请输入户籍",
          trigger: "blur",
        },
      ],
      address: [
        {
          required: true,
          message: "请输入家庭住址",
          trigger: "blur",
        },
      ],
      school: [
        {
          required: true,
          message: "请输入目前就读学校/培训机构",
          trigger: "blur",
        },
      ],
      username_endtime: [
        {
          required: true,
          message: "请选择证件有效期",
          trigger: "blur",
        },
      ],
      password: [
        {
          required: true,
          message: "请输入密码",
          trigger: "blur",
        },
        {
          min: 6,
          max: 13,
          message: "请填写6-13位密码",
          trigger: "blur",
        },
      ],
      passwordone: [
        {
          required: true,
          message: "请再次输入密码",
          trigger: "blur",
        },
        {
          validator: passwordZZ,
          trigger: "blur",
        },
      ],
    };

    const onSubmit = async () => {
      formRef.value
        .validate()
        .then(async () => {
          const data = await setUserRegister(formState);
          if (data.code == 1) {
            message.success(`${data.msg}`);
          } else {
            message.error(`${data.msg}`);
          }
        })
        .catch((error) => {
          console.log("error", error);
        });
    };

    const fileList = ref([]);
    const loading = ref(false);
    const imageUrl = ref("");

    const beforeUpload = async (file) => {
      let param = new FormData();
      param.append("file", file);
      const data = await uploadImg(param);
      formState.avatar = data.data.url;
      imageUrl.value = imgUrl + data.data.url;
      message.info(`${data.msg}`);
      console.log("图片上传---", data);
    };

    const panelChange1 = (val, mode) => {
      formState.birthday = mode;
    };

    const panelChange2 = (val, mode) => {
      formState.username_endtime = mode;
    };

    const title = ref("");
    const type = ref();

    onMounted(() => {
      title.value = route.query.title;
      type.value = route.query.type;
    });

    return {
      formRef,
      other: "",
      formState,
      rules,
      onSubmit,
      fileList,
      beforeUpload,
      imageUrl,
      loading,
      panelChange1,
      panelChange2,
      router,
      title,
      type,
    };
  },
  components: {
    Header,
    Footer,
    Examination,
    SignUp,
    Card,
    Achievement,
  },
});
</script>

<style lang="less" scoped>
.title {
  position: relative;
  background-color: rosybrown;
  color: #fff;
  font-weight: 800;
  letter-spacing: 1px;
  font-size: var(--bannerSize);

  .bannerImg {
    width: 100%;
    display: var(--bannerImgBool);
  }
  .bannerDiv {
    width: 100%;
    height: 230px;
    background-image: url(../../assets/image/register.png);
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-position: center;
    display: var(--bannerDivBool);
  }
  span {
    display: block;
    width: 100%;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
.cantainer {
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.24);
  border-radius: 20px;
  width: 100%;
  padding: 30px;
  max-width: 1248px;
  position: relative;
  top: var(--bannerTop);
  left: 50%;
  transform: translateX(-50%);
  background-color: #fff;

  .titleText {
    border-bottom: 1px solid #e6e6e6;
    padding-bottom: 20px;
    font-size: 1.37rem;
    font-family: PingFang SC;
    font-weight: 500;
    color: #333333;
    text-align: center;
  }
}
/deep/ .ant-modal-confirm-btns {
  display: none;
}
.modal {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  //   top: 50%;
  //   left: 50%;
  //   transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.459);

  div {
    width: 80%;
    max-width: 400px;
    height: 200px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 20px;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 1px;
  }
}
</style>
